<template>
    <div class="memberAdded">
      <div class="memberAdded-top">
        <van-row>
          <van-col span="12">
            <van-button  :type="type" class="maskBtn" @click="getGradeList(1,'primary','default')">本周</van-button>
          </van-col>
          <van-col span="12">
            <van-button  :type="type2" class="maskBtn" @click="getGradeList(2,'default','primary')">本月</van-button>
          </van-col>
        </van-row>
      </div>


      <!--内容部分-->
      <div class="memberAdded-content">
        <!--会员新增同比-->
        <p class="tuTitle">会员新增同比</p>
        <div id="memberAdded" style="height:300px;"></div>

        <div style="color:#999;margin:0 5px;border:1px solid #ddd;margin-top:20px;" class="tablesss">
          <div style="display: flex;background:#EDECE8;">
            <div style="width:33.33%;text-align: center;border-right:1px solid #ddd;padding:5px 0;" v-for="(item,index) in header" :key="index">
              {{item}}
            </div>
            <!--<div style="width:25%;text-align: center;font-size:12px;padding:5px 0;">-->
              <!--比例-->
            <!--</div>-->
          </div>
          <div style="display: flex;"   v-for="(item,idx) in now" :key="idx">
            <div class="addedtable"  v-if="item!=0||last[idx]!=0">
              <span v-if="(idx+1)==1&&now.length==7">星期一</span>
              <span v-else-if="(idx+1)==2&&now.length==7">星期二</span>
              <span v-else-if="(idx+1)==3&&now.length==7">星期三</span>
              <span v-else-if="(idx+1)==4&&now.length==7">星期四</span>
              <span v-else-if="(idx+1)==5&&now.length==7">星期五</span>
              <span v-else-if="(idx+1)==6&&now.length==7">星期六</span>
              <span v-else-if="(idx+1)==7&&now.length==7">星期天</span>
              <span v-else>{{idx+1}}号</span>
            </div>
            <div style="width:33.33%;text-align: center;font-size:12px;border-right:1px solid #ddd;border-bottom:1px solid #ddd;padding:5px 0;" v-if="item!=0||last[idx]!=0">{{item}}位</div>
            <div style="width:33.33%;text-align: center;font-size:12px;border-right:1px solid #ddd;border-bottom:1px solid #ddd;padding:5px 0;" v-if="item!=0||last[idx]!=0">{{last[idx]}}位</div>
            <!--<div style="width:25%;text-align: center;font-size:12px;border-bottom:1px solid #ddd;padding:5px 0;" v-if="item!=0||last[idx]!=0">{{bili[idx]}}</div>-->
          </div>
          <!--没有数据-->
          <div class="noDataClass" :style="{display:noData}" >
            暂无数据
          </div>

        </div>



      </div>


      <!--返回按钮-->
      <backs></backs>

    </div>
</template>

<script>
  // var echarts = require('echarts');

  // 引入 ECharts 主模块
  var echarts = require('echarts/lib/echarts');

  // 引入柱状图
  require('echarts/lib/chart/bar');
  // 引入提示框和标题组件
  require('echarts/lib/component/tooltip');

  require('echarts/lib/component/title');
  //引入图表提示标题
  require('echarts/lib/component/legendScroll');
  require('echarts/lib/component/title');

  import backs from "@/components/menu/backPrev";

  export default {
        name: "memberAdded",
        components: {
          backs
        },
        data(){
          return {
            grade:false,
            radio:'1',
            type:"primary",
            type2:"default",
            radioName:"本周",
            radioName2:"本月",
            header: ['星期', '本周新增会员', '上周新增会员'],
            tables: {},
            now: [],
            last: [],
            bili: [],
            len: 0,
            noData: 'none',
            sys:{}
          }
        },
      methods:{
        getGradeList(idx,type1,type2){
          this.noData = 'none'
          this.grade=false;
          this.radio=idx;
          this.type=type1;
          this.type2=type2;
          if (idx === 1) {
            this.header = ['星期', '本周新增会员', '上周新增会员']
          } else {
            this.header = ['号数', '本月新增会员', '上月新增会员']
          }
          this.getData();
        },
        getData(){
          var $this=this;
          this.$http.member.get('/vipTable/'+this.radio+'/newVipRatio')
            .then(function (response) {
              // console.log(response.data.data);
              var empId = localStorage.getItem('empId')
              if(empId&&response.data.code){
                $this.$toast.fail(response.data.message);
                $this.$router.go(-1)
                return;
              }
              $this.now = []
              $this.last = []
              $this.bili = []
              $this.tables = {}
              //  获取对象属性长度判断是周还是月
              var lens=Object.getOwnPropertyNames(response.data.data.now).length;
              var lens2 = Object.getOwnPropertyNames(response.data.data.last).length;
              for (var val in response.data.data.now) {
                $this.now.push(response.data.data.now[val])
              }
              if (lens2 > lens) {
                $this.now.push(0)
              }
              for (var v in response.data.data.last) {
                $this.last.push(response.data.data.last[v])
              }
              if (lens > lens2) {
                $this.last.push(0)
              }
              for (var i = 0; i < $this.now.length; i++) {
                $this.bili.push($this.now[i] + ':' + $this.last[i])
              }
              $this.tables = {
                now: $this.now,
                last: $this.last,
                bili: $this.bili
              }
              if ($this.now.length) {
                $this.loadEchartsFn(response.data.data.now,response.data.data.last,lens);
              } else {
                $this.now = []
              }

            })
            .catch(function (error) {
              console.log(error);
            });

        },
        loadEchartsFn(now,last,len){
          var title;//图表标题
          var datas=[];//最终的本周或者本月的值
          var datased=[];//最终的上周或者上月的值
          var xAxisData=[];
          var index = 0;
          if(len==7){
            xAxisData=['周一','周二','周三','周四','周五','周六','周日'];
            title=['本周','上周'];
            for(var val in now){
              datas.push(now[val]);
            }
            for(var v in last){
              datased.push(last[v]);
            }
          }else{
            title=['本月','上月'];
            var idx=0;
            //本月数据
            for(var item in now){
              idx++;
              xAxisData.push(idx+"号");
              datas.push(now[item]);
            }
            //上月数据
            for(var v in last){
              datased.push(last[v]);
            }
            // 假数据
            // datas = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31];
            // datased = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22];
          }
          var len = datas.length > datased.length ? datas.length : datased.length
          // console.log(len)
          if (datas.length > datased.length) {
            for(var c = 0;c < (datas.length - datased.length);c++){
              datased.push(0)
            }
          }else if(datased.length > datas.length){
            for(var d = 0;d < (datased.length - datas.length);d++){
              datas.push(0)
            }
          }

          for (var i = 0; i < len; i++) {
            if (datas[i] !== 0 || datased[i] !== 0) {
              index = 1
            }
          }
          this.noData = !index ? 'block' : 'none';
          var myChart = echarts.init(document.getElementById('memberAdded'));
          var option = {
            tooltip : {
              trigger: 'axis',
              axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
              }
            },
            legend: {
              data:title
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis : [
              {
                type : 'category',
                data : xAxisData
              }
            ],
            yAxis : [
              {
                type : 'value'
              }
            ],
            series : [
              {
                name:title[0],
                type:'bar',
                stack: '本周',
                data:datas,
                color:["#C23531"]
              },
              {
                name:title[1],
                type:'bar',
                data:datased,
                color:["#2F4554"]
              }

            ]
          };
          myChart.setOption(option);
        },
        getDays () {
          var d = new Date()
          this.len = new Date(d.getFullYear(), (d.getMonth() + 1), 0).getDate()
        },
        // 获取系统设置
        getXT(){
          this.$http.setting.get('/systemsetupval').then(res => {
            // console.log(res)
            let getsystem = (code) => Object.values(res.data.data).filter(item => item.code == code)[0].val;
            this.sys = {
              sys_setting_home_zdlsspphb  : getsystem('sys_setting_home_zdlsspphb'), //    是否显示：终端零售商品排行榜
              sys_setting_home_zdlsphb  : getsystem('sys_setting_home_zdlsphb'), //     是否显示：终端零售排行榜：
              sys_setting_home_dp  : getsystem('sys_setting_home_dpxsphb'), //     是否显示：店铺销售排行榜：
              sys_setting_home_sr  : getsystem('sys_setting_home_hysrtx'), //     是否显示：会员生日提醒：
              sys_setting_home_hyxztb  : getsystem('sys_setting_home_hyxztb'), //      是否显示：会员新增同比：
            }
            // console.log(this.sys)
            if(!parseInt(this.sys.sys_setting_home_hyxztb)){
              this.$toast.fail('系统设置中未配置！');
              this.$router.go(-1)
              return
            }
            this.getData();
            this.getDays();
          })
            .catch(err => {
              this.$toast.fail('登陆过期，请重新登陆');
            })
        }
      },
      mounted(){
        // var empId = parseInt(localStorage.getItem('empId'));
        // if(!empId){
        //   this.getXT();
        // }
        this.getXT();

      }

    }
</script>

<style scoped>
  .memberAdded{
    font-size:14px;
    color:#666;
  }
  .tablesss{
    background: #fff;
  }
    .memberAdded-top .iconfont{
      font-size:12px;
    }
  .memberAdded .van-popup{
    width:100%;
  }
  .memberAdded-top{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    z-index:999!important;
  }
  .memberAdded-content{
    padding:20px 0;
    margin-top:45px;
  }
  .memberAdded-content>.tuTitle{
    font-size:14px;
    font-weight: bold;
  }
  .noDataClass{
    color:#ddd;
    text-align: center;
    font-size:12px;
    padding:10px;
  }
  .maskBtn{
    width:100%;height:35px!important;line-height: 35px!important;
  }
  .addedtable{
    width:33.33%;text-align: center;font-size:12px;border-right:1px solid #ddd;border-bottom:1px solid #ddd;padding:5px 0;
  }
</style>
